<template>
	<view class="" style="padding-bottom: 150rpx;" v-if="pageShow">
		<view class="flexstart mainpadding ffffff">
			<image :src="dataAll.user.avatar_text" class="radius" style="width: 90rpx;height: 90rpx;min-width: 90rpx;" mode=""></image>
			<view class="margin_left2" style="width: 100%;">
				<view class="titletext xiaohei fonweight">{{dataAll.user.nickname}}</view>
				<view class="xiaohei ershil margin_top2">上山传奇下山都退</view>
				<view class="xiaohui ershil margin_top2">{{dataAll.content}}</view>
				<view class="flexleft flex_wrap">
					<view class="sanshis flexcenter" v-for="(ite,ind) in dataAll.images_text" :key="ind" @click="lbtpriview(ind,dataAll.images_text)">
						<view class="margin_top2" style="width: 180rpx;height: 180rpx;">
							<image :src="ite" class=" radius" style="width: 100%;height: 100%;" mode=""></image>
						</view>
					</view>
				</view>
				<view class=" flexbetween margin_top2">
					<view class="xiaohui strongtext">{{dataAll.createtime_text}}</view>
				</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff" v-if="list.total">
			<view class="titletext xiaohei fonweight">评论（{{list.total}}）</view>
			<view class="flexleft xiahuaxian margin_top" style="align-items: flex-start;" v-for="item in list.data" :key="item.id" @click="zhuiping(item)">
				<image :src="item.user.avatar_text" class="plheadimg margin_right2" mode=""></image>
				<view class="" style="width: 100%;"> 
					<view class="titletext xiaohei">{{item.user.nickname}}</view>
					<view class="xiaohei ershil margin_top">{{item.content}}</view>
					<view class="flexbetween margin_top1">
						<view class="xiaohui strongtext">{{item.createtime_text}} <text class="xiaohei margin_left2">回复</text></view>
					</view>
					<!-- 追评 -->
					<view class="flexleft margin_top" style="align-items: flex-start;" v-for="ite in item.childlist" :key="ite.id">
						<image :src="ite.user.avatar_text" class="plheadimg2 margin_right2" mode=""></image>
						<view class="" style="width: 100%;"> 
							<view class="titletext xiaohei">{{ite.user.nickname}}</view>
							<view class="xiaohei ershil margin_top">{{ite.content}}</view>
							<view class="flexbetween margin_top1">
								<view class="xiaohui strongtext">{{ite.createtime_text}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="gudingdb mainpadding2s ffffff">
			<view class="flexbetween ssbox" style="background-color: #f3f3f3;">
				<input type="text" ref="input" placeholder="说点什么吧" :focus="focus" @blur="outfocus" class="hei_text main_size bold" style="width: 100%;"
					v-model="content" confirm-type="search" @confirm="send">
				<view class="rightss" @click="send">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				content:"",
				listid:"",
				pageShow:false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				dataAll:{},
				focus:false,
				pid:"",
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
			this.init()
		},
		methods: {
			zhuiping(item){
				this.focus=false;
				setTimeout(()=>{
					
				},1000)
				this.focus=true;
				this.pid=item.id
			},
			outfocus(){
				this.focus=false
			},
			send(){
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				if(this.content == "") return
				let pid = this.pid
				let content = this.content
				this.pid = ""
				this.content = ""
				this.focus = false
				httpRequest.request('/api/userdtcl/addDtComment', 'GET', {
					user_dt_id: this.listid,
					content,
					pid
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.init()
					}
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					id: this.listid
				}
				let url = '/api/userdtcl/dtCommentIndex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getDetail() {
				httpRequest.request('/api/userdtcl/dtDetail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				})
			},
		}
	}
</script>

<style>
.plheadimg{
		width: 70rpx;
		height: 70rpx;
		min-width: 70rpx;
		border-radius: 50%;
	}
	.plheadimg2{
		width: 50rpx;
		height: 50rpx;
		min-width: 50rpx;
		border-radius: 50%;
	}
</style>
